<script setup lang="ts">
import {ref, onMounted} from "vue";
import {PostContentApi} from "../api/mycontent"
import {ElMessage} from "element-plus";
const context = ref("")
const projectName = ref("")
const projectRandomId = ref("")
const projectList = ref([])
function saveByHand() {
  saveContent()
}
function changeContext() {
  if (!autoSave.value) {
    return;
  }
  saveContent()
}
function saveContent() {
  if (context.value !== "" && projectName.value !== "") {
    PostContentApi({
      "title": projectName.value,
      "content": context.value,
      "contentCode": projectRandomId.value
    }).then(res => {
      if (res.status !== 200) {
        ElMessage({
          message: '保存失败',
          type: 'error',
          plain: true,
        })
      }
    })
  }
}
import {GetContentListApi, GetContentDetailApi} from "../api/mycontent"
const centerDialogVisible = ref(false)
function postPassword() {
  if (password.value === "123456") {
    projectRandomId.value = Math.random().toString(36).substring(2) + Date.now().toString(36)
    GetContentListApi().then(res => {
      projectList.value = res.data
    })
    centerDialogVisible.value = false
    localStorage.setItem('token', "1111");
  } else {
    ElMessage({message: '密码不正确！', type: 'error'})
  }
  return;
}
const password = ref("")
onMounted(() => {
  const item = localStorage.getItem('token');
  if (item === null) {
    centerDialogVisible.value = true
  } else {
    projectRandomId.value = Math.random().toString(36).substring(2) + Date.now().toString(36)
    GetContentListApi().then(res => {
      projectList.value = res.data
    })
  }
})
function chooseUpdateProject(id) {
  GetContentDetailApi({"id": id}).then(res => {
    context.value = res.data.content
    projectName.value = res.data.title
    projectRandomId.value = res.data.contentCode
  })
}
const selectedValue = ref('')
function notInputPassword() {
  centerDialogVisible.value = true
  ElMessage({message: '无权访问！', type: 'error'})
}
import {PostImageApi} from "../api/mycontent"
function handleUploadImage(event, insertImage, files) {
  PostImageApi(files[0]).then(res => {
    if (res.status === 200) {
      console.log(res.data.data.url)
      insertImage({
        url: res.data.data.url,
        desc: res.data.data.originName,
        width: 'auto',
        height: 'auto',
      });
    }
  })
}

// 自动保存
const autoSave = ref(false)
</script>
<template>
  <div style="height: 100vh;width: 80vw">
    <div style="margin-bottom: 2%">
      <label>文章标题：</label>
      <el-input style="width: 20vw;" v-model="projectName"></el-input>
      <el-select v-model="selectedValue" @change="chooseUpdateProject" style="width: 10vw;margin-left: 1%">
        <el-option
            v-for="item in projectList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
        />
      </el-select>
      <el-switch
          v-model="autoSave"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;margin-left: 1%"
          active-text="自动保存"
          inactive-text="手动保存"
      />
    </div>
    <v-md-editor v-model="context" height="80vh" @change="changeContext"
                 @upload-image="handleUploadImage"
                 :disabled-menus="[]"></v-md-editor>

    <div style="margin-top: 1%">
      <el-button type="primary" @click="saveByHand">保存</el-button>
    </div>
  </div>
  <el-dialog v-model="centerDialogVisible" title="请输入访问密码" width="30vw" center :before-close="notInputPassword">
    <label>密码：</label>
    <el-input style="width: 20vw" v-model="password"></el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="postPassword">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.v-md-editor {
  text-align: left; /* 确保编辑器内容左对齐 */
}
</style>